<template>
    <div class="test">
        <div class="top">
            <div class="name">{{ examInfo.name }}</div>
            <div class="time">考试剩余时间：<span>{{ time }}</span></div>
        </div>
        <div class="topic">
            <div class="titleCode">
                [{{ index + 1 }}/{{ alltopic.length }}]
            </div>
            <div class="title">
                {{ index + 1 }}.{{ topic_list.question }}
            </div>
            <ul>
                <li v-for="item in topic_list.option" :key="item.key" @click="select(item.key, index)"
                    :class="{ active: item.key === daan[index] }">
                    {{ item.key }}.{{ item.answer }}
                </li>
            </ul>
        </div>
        <div class="button">
            <div style="display: flex;">
                <van-button plain type="success" @click="prev">上一题</van-button>
                <van-button plain type="primary" @click="next">下一题</van-button>
            </div>
            <van-button type="primary" @click="submit">提交试卷</van-button>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, watch} from 'vue'
import { useRoute, useRouter } from 'vue-router';
import api from '../api/request'//网络请求
import { showDialog, showConfirmDialog, showToast } from 'vant';
import { storeToRefs } from 'pinia'
import { useExamStore } from '../stores/exam'
const $route = useRoute()
const $router = useRouter()
const examStore = useExamStore()

// 如果没有题目，给出提示
let eid = $route.query.eid//试卷id
api.topic_list({ eid })
    .then(res => {
        if (res.code != 200) {
            showDialog({ message: '抱歉，~该试卷还没有题目' })
                .then(() => {
                    $router.go(-1)
                })
        }
    })
// 主要试卷信息.........................................................
let alltopic: any = storeToRefs(examStore).newtopiclist//所有题目列表
examStore.examInfoFn()//获取试卷信息
let examInfo: any = ref({})//定义试卷信息
// let time: any = ref(0)//定义考试剩余时间
examStore.destoryTimer();
let time = storeToRefs(examStore).time
examInfo = storeToRefs(examStore).examInfo

// 监听考试时间
watch(time, () => {
    if (time.value == '00:00:00') {
        // 时间到执行这里
    }
}, { deep: true })

// 题目....................................................
let index = storeToRefs(examStore).index//当前题目索引
examStore.topiclistFn()//获取试题列表
let topic_list: any = ref([])
topic_list = storeToRefs(examStore).topiclist//赋值
// 下一题
const next = () => {
    examStore.next();
}
// 上一题
const prev = () => {
    examStore.prev();
}
// .......................................................
// 记录成绩
let grade = {
    score: 0,//得分
    correct: 0,//正确题数
    wrong: 0,//错误题数
    time: '00:00:00'//考试所用时间
}
// 记录选择的答案
let daan: any = []
let num = 0;

// 选择答案
const select = (key: any, i: any) => {
    daan[i] = key;
    if (key == alltopic.value[i].answer) {
        grade.correct++;
        grade.score += alltopic.value[i].score;
    }
    else {
        grade.wrong++;
    }

}
// 提交试卷
const submit = () => {
    grade.time = time.value;
    for (let i = 0; i < alltopic.value.length; i++) {
        if (daan[i] == undefined) {
            num++;
        }
    }
    if (num==0) {
        showConfirmDialog({
            title: '提示',
            message: `确认要交卷吗？`
        })
            .then(() => {
                // 跳转并传递参数
                $router.push({ name: 'grade', query: {grade: JSON.stringify(grade), daan: daan, eid: eid as string,num:num} });
                
            })
            .catch(() => {
                showToast('细心检查后再交卷吧~');
            });
    }
    else {
        showConfirmDialog({
            title: '提示',
            message: `您还有${num}道题没做完确认交卷吗?`
        })
            .then(() => {
                // 跳转并传递参数
                $router.push({ name: 'grade', query: {grade: JSON.stringify(grade), daan: daan, eid: eid as string,nun:num} });

            })
            .catch(() => {
                showToast('细心检查后再交卷吧~');
            });
    }


}



</script>
<style lang="less" scoped>
@import url(../assets/appColor.less);

.test {
    padding: 10px;
    padding-top: 100px;
    position: relative;
    padding-bottom: 70px;

    .top {
        position: fixed;
        top: 0;
        width: 95%;
        background-color: white;

        .name {
            font-size: 25px;
            font-weight: bold;
            padding-bottom: 10px;
            margin-bottom: 10px;
            border-bottom: 3px solid black;
        }

        .time {
            margin-bottom: 10px;

            span {
                font-weight: bold;
            }
        }
    }

    .topic {
        .titleCode {
            margin-left: 80%;
        }

        .title {
            margin-top: 10px;
        }

        ul {
            margin-top: 20px;

            li {
                margin-bottom: 20px;
                padding: 15px;
                border-radius: 17px;
                font-size: 20px;
            }

            .active {
                background-color: @bgcolor;
            }
        }
    }

    .button {
        position: fixed;
        background-color: white;
        width: 95%;
        bottom: 0;
        display: flex;
        justify-content: space-between;

        button {
            margin: 5px;
        }
    }
}
</style>